<template>
	<view class="main">
		<view class="header">
			<image class="aside" src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/aside.png" alt=""
				@click="showLeft = !showLeft" />
		</view>
		<view class="middle">
			<view class="btn-1" @click="toExploreQJ"></view>
			<view class="btn-2" @click="toActive"></view>
			<view class="btn-3" @click="toStore"></view>
		</view>
		<view class="bottom">
			<view class="discover" @click="toDiscover"></view>
			<view class="home" @click="toHome"></view>
			<view class="mine" @click="toUserPage"></view>
		</view>

		<van-popup v-model:show="showLeft" position="left" :style="{ width: '65.33vw', height: '89.16vh' }">
			<view class="inner">
				<view class="top">
					<view class="popupBox" @click="toUserOrderList">
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-6.png"
							class="topImg" />我的订单
					</view>
					<view class="popupBox" @click="toUserPoints">
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-7.png"
							class="topImg" />积分账户
					</view>
					<view class="popupBox" @click="toMyOrder">
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-8.png"
							class="topImg" />我的预约
					</view>
					<view class="popupBox">
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-9.png"
							class="topImg" @click="showLeft = !showLeft" />400
						8700
						290
					</view>
				</view>
				<view class="popupBottom">
					<image class="bottomImg"
						src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/icon-10.png" alt=""
						@click="showLeft = !showLeft" />
					<image class="bottomImg" src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/scan.png"
						alt="" @click="showLeft = !showLeft" />

					<image class="bottomImg"
						src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/friend.png" alt=""
						@click="toFriendPage" />
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	// import {getActive} from '../../common/api.js'


	const router = useRouter();
	const showLeft = ref(false);
	const showDialog = ref(false);
	const param1 = ref(333)

	onMounted(() => {
		console.log(22);
		// getActive({
		// 	pageNo: 1,
		// 	pageSize: 100,
		// 	status: 1,
		// })
	})

	const toExploreQJ = () => {
		showLeft.value = false;
		uni.reLaunch({
			url: '/pages/exploreQJ/index'
		})
	};
	const toActive = () => {
		showLeft.value = false;
		uni.reLaunch({
			url: '/pages/actives/index'
		})
		console.log("沙龙活动");
	};
	const toStore = () => {
		showLeft.value = false;
		router.push({
			name: "Store",
		});
	};
	const toHome = () => {
		console.log("首页");
		router.push({
			name: "Home",
		});
	};
	const toDiscover = () => {
		showLeft.value = false;
		uni.reLaunch({
			url: '/pages/discover/index'
		})
	};
	const toUserPage = () => {
		showLeft.value = false;
		uni.reLaunch({
			url: '/pages/userPage/index'
		})
	};
	const toUserOrderList = () => {
		showLeft.value = false;
		uni.reLaunch({
			url: '/pages/test/index?param1=' + param1.value
		})
	};
	const toUserPoints = () => {
		showLeft.value = false;
		router.push({
			name: "UserPoints",
		});
	};
	const toMyOrder = () => {
		showLeft.value = false;
		router.push({
			name: "MyOrder",
		});
	};
	const toFriendPage = () => {
		showLeft.value = false;
		router.push({
			name: "Friend",
		});
	};
	const share = () => {
		showDialog.value = true;
	};
</script>

<style lang="scss" scoped>
	.main {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 100vw;
		height: 100vh;
		background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/home.png") no-repeat center center;
		background-size: cover;
		color: $color-text;

		.header {
			display: flex;
			box-sizing: border-box;
			align-items: center;
			position: absolute;
			top: 0;
			z-index: 999999;
			height: 14.29%;
			width: 100%;
			padding: 0 3.07vw;
			padding-top: 2vh;

			.aside {
				width: 4.4vw;
				height: 4.4vw;
			}

			// background-color: red;
		}

		.bottom {
			position: absolute;
			bottom: 0;
			height: 10.22%;
			width: 100%;
			background: url("https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/bottom.png") no-repeat center center;
			background-size: cover;
			box-shadow: 0px -5px 9px 1px rgba(0, 0, 0, 0.27);

			.discover,
			.mine {
				opacity: 0;
				position: absolute;
				top: 36%;
				right: 14%;
				height: 25%;
				width: 10.5%;
			}

			.discover {
				right: 75%;
			}

			.home {
				opacity: 0;
				position: absolute;
				top: 10%;
				right: 44%;
				height: 54%;
				width: 12%;
				border-radius: 50%;
			}
		}

		.middle {
			.btn-1 {
				opacity: 0;
				height: 17%;
				width: 37%;
				position: absolute;
				top: 23%;
				right: 6%;
			}

			.btn-2 {
				opacity: 0;
				height: 21%;
				width: 44%;
				position: absolute;
				top: 33%;
				right: 51%;
			}

			.btn-3 {
				opacity: 0;
				height: 17%;
				width: 43%;
				position: absolute;
				top: 63%;
				right: 22%;
			}
		}

	}

	.inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 4.06vh 0 10.22vh 3.07vw;
		background-color: rgba(135, 49, 46, 1);
		width: 65.33vw;
		height: 74.2vh;

		.top {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			height: 30.91vh;
			font-size: $font-size-large;

			.popupBox {
				display: flex;
				align-items: center;
				font-weight: bold;

				.topImg {
					width: 9.33vw;
					height: 9.33vw;
					margin-right: 3.6vw;
				}
			}
		}

		.popupBottom {
			display: flex;
			align-items: flex-start;

			.bottomImg {
				width: 6vw;
				height: 6vw;
				margin-right: 6vw;
			}
		}
	}

	::v-deep .van-transition {
		height: 89.16vh;
		top: 11.5%;
	}

	::v-deep .van-popup {
		position: relative;
	}

	::v-deep .van-popup--left {
		position: absolute !important;
		top: unset !important;
		transform: unset !important;
		bottom: 0% !important;
	}



	// ::v-deep .van-dialog {
	// 	// position: relative;
	// 	height: 35.84%;
	// 	border-radius: 2.67vw;
	// 	padding: 1.54vh 12.4vw 2.53vh 12.4vw;
	// 	background-color: white;

	// 	.avatar {
	// 		width: 14.8vw;
	// 		border-radius: 100%;
	// 		box-shadow: 0px 5px 6px 1px rgba(0, 0, 0, 0.34);
	// 	}

	// 	span {
	// 		margin-top: 0.86vh;
	// 		font-size: $font-size-small;
	// 		color: black;
	// 	}

	// 	.dialogTop {
	// 		display: flex;
	// 		flex-direction: column;
	// 		align-items: center;
	// 	}

	// 	.QRcode {
	// 		width: 100%;
	// 	}
	// }

	// ::v-deep .van-dialog__content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	align-items: center;
	// 	justify-content: space-between;
	// 	height: 100%;
	// }
</style>